<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景图片位置。 backgroud-position 设置背景图片出现在盒子的什么位置*/
        /* backgroud-position:100px 200px 或者用center right bottom 等表示*/
        /* 如果仅设置了一个值，那么另外一个值就是center */
        /* 当backgroud-attachmend是fixed的时候，不能两个都是center */
        div{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin-bottom: 20px;
            background-image: url(3.png);
            background-size:auto 50%;
            background-repeat: no-repeat;
        }
        div.box1{
            background-position: 100px 100px;
        }
        div.box2{
            background-position: center center;
        }
        div.box3{
            background-position: center top;
        }
        div.box4{
            /* 等价于 background-position: right center; */
            background-position: right ;
        }
        div.box5{
            /* 背景填充整个盒子的时候，以什么位置为准 */
            background-size: cover;
            background-position: bottom center;
        }
        div.box6{
            /* 背景只能填充盒子，以什么位置为准 */
            background-size: contain;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</body>
</html>